<template>
  <div id="app">
  <!--<img src="./assets/logo.png">-->
  <h1>{{ title }}</h1>
  <input v-model="username">
  <button v-on:click="add">添加</button>
  <ul>
    <li v-bind:class="{del:todo.done}" v-for="(todo,index) in todos":id="index">
      <label>{{index+1}}.{{todo.value}}</label>
      <time>{{todo.created|date}}</time>
    </li>
  </ul>
    <span>总共要完成{{total}}件事情,已完成{{done}}件，还剩{{total-done}}件未完成</span>
  <todo :total="todos.length" :done="done"/>
</div>
</template>


<script>
  import Todo from './Todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')

  export default {
  name: 'app',
    components:{Todo},
    methods: {
      add: function () {
        this.todos.push({value:this.username,done:false, created:Date.now()});
      }
    },
    computed:{
      done:function(){
        var count=0;
        for(var i=0;i<this.todos.length;i++){
          if(this.todos[i].done){
            count++;
          }
        }return count;
      }
    },
  data () {
    return {
      username:null,
      title:"vue-todos",
      todos:[
        {value:"阅读一本关于前端开发的书",done:false,created:Date.now()},
        {value:"补充范例代码",done:true,created:Date.now()+300000},
        {value:"写心得",done:false,created:Date.now()-300000}
      ],
      filters:{
        date(val){
          return moment(val).calendar()
         //return ((val.getFullYear()+"."+(val.getMonth()+1)+"."+val.getDate()+"  "
         //+val.getHours()+":"+val.getMinutes()+":"+val.getSeconds()))
        }
      },

    }
  }
}
</script>
<style> .del{text-decoration: line-through;color:#BDBDBD}</style>
<style>
/*#app {*/
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
/*}*/

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 15px;
}

/*li {*/
  /*display: inline-block;*/
  /*margin: 0 10px;*/
/*}*/

a {
  color: #42b983;
}
</style>
